<template>
	<view class="contain" style="height:100%;">
		<view class="container">
			<view class="shopcart_content" v-for="(items,index) of cart_list" :key="index">
				<view class="shopName">
					<view class="shopLog">
						<image :src="items.photo" mode=""></image>
					</view>
					<view class="name">
					{{items.shopName}}
					</view>
					<view class="uniicons" style="display: flex;align-items: center; ">
						<uni-icons type="forward"></uni-icons>
					</view>
				</view>
				<view class="goods_list" v-for="(item,idx) of items.goodList" :key="idx">
					<view class="goods_column">
						
						<view class="goods_content">
							<view class="good_img">
								<image :src="item.img" mode=""></image>
							</view>
							<view class="good_info">
								<view class="good_title">
									{{item.title}}
								</view>
								<view class="good_disc">{{item.sub_title}}</view>
							</view>
							<view class="price_info">
								<view class="collect_price">
									￥{{item.price|Int}}.<text>{{item.price|duts}}</text>
								</view>
								<view class="collect_point">
									{{item.point}}分
								</view>
								<view class="collect_num">
									x{{item.num}}
								</view>
							</view>
						</view>
					</view>

					<view class="price_cont">
						<view class="collect_btn delete" @tap="deleteOne(index,idx)">
							删除
						</view>
						<view class="collect_btn share">
							分享
						</view>
					</view>
				</view>

			</view>
		</view>
		

	</view>

</template>

<script>
	export default {
		data() {
			return {
				cart_list: [{
					shopName: "富尔玛家居",
					photo:'@/static/icon/shop.png',
					goodList: [{
							"id": "01",
							"title": "商品2",
							"img":"@/static/image/test.png",
							"sub_title": "KFR-26GW/NhPaB1W KFR-26GW/NhPaB1W KFR-26GW/NhPaB1W",
							"price": 3444,
							"num": 3,
							"point":2000
						},
						{
							"id": "02",
							"title": "商品3",
							"sub_title": "KFR-26GW/NhPaB1W KFR-26GW/NhPaB1W KFR-26GW/NhPaB1W",
							"price": 3444,
							"img":'@/static/image/test.png',
							"num": 0,
							"point":2000
						},
					]
				},
				{
					shopName:"穷尔驴家具",
					shopSelect:false,
					photo:'@/static/icon/shop.png',
					goodList:[
						{
							"id":"03",
							"title":"商品4",
							"sub_title":"KFR-26GW/NhPaB1W KFR-26GW/NhPaB1W KFR-26GW/NhPaB1W",
							"price":3444,
							"img":"@/static/image/test.png",
							"num":0,
							"point":2000
						},
						{
							"id":"04",
							"title":"商品5",
							"sub_title":"KFR-26GW/NhPaB1W KFR-26GW/NhPaB1W KFR-26GW/NhPaB1W",
							"price":3444,
							"img":"@/static/image/test.png",
							"num":0,
							"point":2000
						},
					]
				}
				]
			}
		},
		methods: {
			deleteOne(index,idx){
				this.cart_list[index].goodList.splice(idx,1)
				if(this.cart_list[index].goodList.length==0){
					this.cart_list.splice(index,1)
				}
			}
		},

		computed: {
			
		}
	}
</script>

<style scoped lang="scss">
	page {
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		height: 100%
	}

	.select_btn {
		background-color: none;
		height: 38rpx;
		width: 38rpx;
		border: 1px solid #CDCDCD;
		border-radius: 50%;
	}
	

	.contain {
		height: 100%;
		display: flex;
		width: 100%;
		flex-direction: column;
	}

	.nav_nap {
		background-color: #F9EF4C;
		height: 90rpx;
		width: 100%;
		display: flex;
		align-items: center;

		.nav_item {
			box-sizing: border-box;
			padding: 0 30rpx;
			border-right: 1px solid #BBA61A;
			font-size: 22rpx;
			color: #7B6A3A;

		}

		:nth-child(3) {
			border-right: none;
		}

		.nav_active {
			color: red;
		}

	}

	.container {
		height: 100%;
		flex: 1;
		display: flex;
		flex-direction: column;
		width: 100%;
		box-sizing: border-box;
		padding: 26rpx 30rpx;
		background: $backgroundPage;
		overflow: auto;

		.shopcart_content {
			width: 100%;
			display: flex;
			box-sizing: border-box;
			flex-direction: column;
			background-color: #FFFFFF;
			border-radius: 15rpx;
			align-items: space-between;
			justify-content: center;
			padding: 30rpx 27rpx 0;
			margin-bottom: 30rpx;
			.goods_list{
				margin-top: 40rpx;
				border-bottom: 1px solid #F1F1F1 ;
				padding-bottom: 20rpx;
				&:last-child{
					border: none;
				}
			}
			.shopName {
				display: flex;
				.shopLog {
					width: 38rpx;
					height: 38rpx;
					

					image {
						width: 100%;
						height: 100%;
					}
				}

				.name {
					font-size: 28rpx;
					font-weight: 900;
					margin: 0 10rpx 0 20rpx;
					color: #333333;
				}
			}

			.goods_column {
				display: flex;
				width: 100%;
				align-items: center;

				.goods_content {
					box-sizing: border-box;
					flex: 1;
					height: 100%;
					display: flex;
				
					.price_info{
						font-size: 18rpx;
						color: #333333;
						height: 100%;
						display: flex;
						flex-direction: column;
						align-items: flex-end;
						.collect_price{
							font-size: 22rpx;
							text{
								font-size: 18rpx;
							}
						}
						.collect_point{
							margin: 10rpx 0 8rpx;
						}
					}
					.good_img {
						height: 160rpx;
						width: 160rpx;

						image {
							height: 100%;
							width: 100%;
						}
					}

					.good_info {
						display: flex;
						margin:0 24rpx 0 19rpx;
						flex: 1;
						flex-direction: column;

						.good_title {
							font-size: 22rpx;
							color: #333333;
							font-weight: 900;
						}

						.good_disc {
							box-sizing: border-box;
							padding: 18rpx 0 18rpx;
							font-size: 18rpx;
							line-height: 30rpx;
							white-space: wrap;
							color: #999999;
							border-radius: $base-radius;
						}
					}
				}
			}

			.price_cont {
				display: flex;
				width: 100%;
				margin-top: 30rpx;
				justify-content: flex-end;
				align-items: center;
				.collect_btn{
					border:1px solid #EAEAEA;
					color:#999999;
					font-size: 24rpx;
					border-radius: 40rpx;
					width: 132rpx;
					height: 40rpx;
					line-height: 40rpx;
					text-align: center;
				}
				.delete{
					margin-right: 20rpx;
				}
				
			}

		}
	}

	.footer_btn {
		width: 100%;
		box-sizing: border-box;
		height: 80rpx;
		padding: 0 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #FBF8E4;

		.select_all {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 24rpx;
			color: #666666;

		}

		.total_price {
			height: 100%;
			align-items: center;
			font-size: 24rpx;
			display: flex;
			color: #999999;
			justify-content: space-between;

			.discount {
				color: #999999;
				height: 100%;
				display: flex;
				align-items: center;

			}

			.total {
				margin-left: 25rpx;
				color: #999999;
				display: flex;
				align-items: center;
			}

			.total_num {
				color: #F84835;
				font-size: 24rpx;
			}

			.decimal {
				color: #f23b17;
			}

		}

		.buy_btn {
			width: 152rpx;
			height: 62rpx;
			background-color: #F8321D;
			border-radius: 20px;
			text-align: center;
			line-height: 62rpx;
			font-size: 27rpx;
			color: #fff;
		}
	}
</style>
